<!-- 正在上传中的内容 -->
<template>
  <div>
    <!-- 文件上传中 -->
    <template v-if="fileInfo.status === 'ing'">
      <div
        v-if="
          fileInfoType.type === FILE_TYPE.DOC ||
          fileInfoType.type === FILE_TYPE.OTHER
        "
        class="sending-content"
      >
        <div>
          <img
            style="width: 32px; height: 35px"
            :src="require('@/assets/img/' + fileInfoType.fileType + '.png')"
            alt=""
          />
        </div>
        <div class="right-box">
          <div class="file-name">{{ fileInfo.fileName }}</div>
          <div class="upload-info">
            <div class="speed-info">
              {{ formateFileSize(fileInfo.file.size) }}
              {{ uploadDic[uploadStatus] }} {{ speedNum }}/s. {{ processNum }}%
            </div>
            <div class="btn-box" v-if="uploadStatus !== 'uploaded'">
              <span v-if="httpRequest" @click="handleCancel">取消</span>
              <span v-else @click="handleRestUpload">重新上传</span>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="fileInfoType.type == FILE_TYPE.PIC"
        class="loadding_box loading_box_cover"
      >
        <img
          style="max-width: 200px; min-width: 100px"
          :src="fileInfo.content"
        />
        <el-progress
          :stroke-width="2"
          :width="100"
          class="image-process"
          type="circle"
          :percentage="processNum"
        ></el-progress>
      </div>

      <div
        v-if="fileInfoType.type == FILE_TYPE.VIDEO"
        class="loadding_box loading_box_cover"
      >
        <video
          style="max-width: 200px; min-width: 100px"
          :src="fileInfo.content"
        />
        <el-progress
          :stroke-width="5"
          :width="100"
          class="image-process"
          text-color="rgb(var(--color-primary))"
          color="rgb(var(--color-primary))"
          type="circle"
          :percentage="processNum"
        ></el-progress>
      </div>
    </template>

    <!--文件上传完成-->
    <template v-if="uploadStatus === 'uploaded' || fileInfo.status === 'end'">
      <div
        v-if="
          fileInfoType.type === FILE_TYPE.DOC ||
          fileInfoType.type === FILE_TYPE.OTHER
        "
        class="document-content"
      >
        <div class="header-title">
          <img
            style="width: 32px; height: 35px"
            :src="require('@/assets/img/' + fileInfoType.fileType + '.png')"
            alt=""
          />
          <div>
            <div class="name">
              <div class="pre">{{ fileInfo.fileName.slice(0, -8) }}</div>
              <div class="next">{{ fileInfo.fileName.slice(-8) }}</div>
            </div>
            <div class="size">{{ formateFileSize(fileInfo.fileSize) }}</div>
          </div>
        </div>
        <div class="middle-content">
          <img
            style="width: 32px; height: 35px"
            :src="require('@/assets/img/' + fileInfoType.fileType + '.png')"
            alt=""
          />
        </div>
        <div class="bottom-operate">
          <div class="btn" @click="handleDownload">下载</div>
          <!-- <div class="btn">转发</div> -->
        </div>
        <el-progress
          v-if="downloadProcessNum > 0 && downloadProcessNum < 100"
          :percentage="downloadProcessNum"
        ></el-progress>
      </div>

      <div v-if="fileInfoType.type == FILE_TYPE.PIC" class="loadding_box">
        <el-image
          lazy
          style="max-width: 200px; min-width: 100px"
          :src="minioEndpoint_mini + fileInfo.content + '!200x200'"
          :preview-src-list="[minioEndpoint_mini + fileInfo.content]"
        >
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
        <el-progress
          v-if="downloadProcessNum > 0 && downloadProcessNum < 100"
          :percentage="downloadProcessNum"
        ></el-progress>
      </div>
      <div v-if="fileInfoType.type == FILE_TYPE.VIDEO" class="loadding_box">
        <video
          style="max-width: 200px; min-width: 100px"
          controls
          loop
          :src="minioEndpoint_mini + fileInfo.content"
        />
        <el-progress
          v-if="downloadProcessNum > 0 && downloadProcessNum < 100"
          :percentage="downloadProcessNum"
        ></el-progress>
      </div>
    </template>
  </div>
</template>

<script>
import { formateSize } from "@/utils/chat"
import { useUploadFile } from "@/utils/minio"
import { FILE_TYPE, getFileType } from "@/utils/constant"
import { courseDownload } from "@/utils/file"
import * as math from "mathjs"
import { mathNum } from "@/utils/mathTool"
import { addDomain } from "@/utils/tools"
export default {
  props: {
    fileInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      processNum: 0,
      downloadProcessNum: 0,
      speedNum: 0,
      httpRequest: null,
      uploadStatus: "uploading",
      startTime: 0,
      uploadedSize: 0,
      uploadDic: {
        uploading: "传输中...",
        uploaded: "传输完成",
        uploadCancel: "传输中断",
        uploadFail: "传输错误"
      },
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      FILE_TYPE: FILE_TYPE
    }
  },

  created() {
    // console.log("fileContent......", this.fileInfo)
  },

  mounted() {
    // this.uploadFile()
    // 消息类型：AT("@"), TEXT("文本"), FILE("文件");
    // 文件类型：DOC("文档"), PIC("图片"), VIDEO("视频"), VOICE("音频"), OTHER("其它");
  },

  computed: {
    fileInfoType() {
      const { type, fileType } = getFileType(this.fileInfo.fileName)
      return { type, fileType }
    }
  },

  methods: {
    formateFileSize(size) {
      return formateSize(size)
    },

    onUploadProcess({ progressEvent }) {
      this.processNum = this.cumputeProcess(
        progressEvent.loaded,
        progressEvent.total
      )
      let endTime = new Date().getTime()
      let perTime = (endTime - this.startTime) / 1000
      this.startTime = new Date().getTime()
      let perLoad = progressEvent.loaded - this.uploadedSize
      this.uploadedSize = progressEvent.loaded
      this.speedNum = formateSize((perLoad / perTime).toFixed(2))
    },
    async uploadFile() {
      try {
        this.startTime = new Date().getTime()
        this.uploadStatus = "uploading"
        const res = await useUploadFile(
          this.fileInfo.file,
          this.onUploadProcess,
          (http) => {
            this.httpRequest = http
          }
        )
        this.uploadStatus = "uploaded"
        return res
      } catch (error) {
        this.uploadStatus = "uploadFail"
        return Promise.reject(error)
      }
    },

    cumputeProcess(a, b) {
      const num = math.multiply(mathNum.divide(a, b), 100).toFixed()
      return parseInt(num)
    },
    async handleRestUpload() {
      const res = await this.uploadFile()
      this.$emit("resetUploadSuccess", {
        ...this.fileInfo,
        content: res,
        status: "end"
      })
    },
    handleCancel() {
      if (this.httpRequest) {
        this.processNum = 0
        this.speedNum = 0 + "B"
        this.uploadStatus = "uploadCancel"
        this.httpRequest.abort()
        this.httpRequest = null
      }
    },
    handleDownload() {
      courseDownload(
        // eslint-disable-next-line no-undef
        minioEndpoint_mini + this.fileInfo.content,
        this.fileInfo.fileName,
        (e) => {
          this.downloadProcessNum = this.cumputeProcess(e.loaded, e.total)
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.sending-content {
  width: 420px;
  height: 68px;
  background: #ffffff;
  border-radius: 2px;
  display: flex;
  padding: 16px 10px;
  .right-box {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    line-height: 14px;
    padding-left: 16px;
    .file-name {
      color: #333333;
    }
    .upload-info {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      color: #999999;
      .btn-box {
        cursor: pointer;
        color: rgb(var(--color-primary));
      }
    }
  }
}

.document-content {
  width: 320px;
  height: 297px;
  background: #ffffff;
  padding: 11px;
  border-radius: 2px;
  .middle-content {
    width: 297px;
    height: 182px;
    position: relative;
    &::before {
      content: "";
      display: flex;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 17px;
      background: url("@/assets/img/fileBg.png") no-repeat;
      background-size: contain;
    }
    padding: 12px;
    background-color: #f2f8ff;
    border-radius: 2px;
  }
}

.header-title {
  margin-bottom: 15px;
  display: flex;
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 10px;
  }
  .name {
    max-width: 250px;
    font-size: 14px;
    color: #333333;
    line-height: 14px;
    font-weight: 600;
    display: flex;
    overflow: hidden;
    flex: 1;
    .pre {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .next {
      white-space: nowrap;
    }
  }

  .size {
    font-size: 14px;
    line-height: 14px;
    color: #999999;
  }
}

.middle-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-operate {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  .btn {
    // width: 144px;
    width: 100%;
    height: 28px;
    border: 1px solid #c7cdd9;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
  }
}

.loadding_box {
  position: relative;
  .image-process {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
  }
}
.loading_box_cover {
  &::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 5;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
}

.image-slot {
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f8ff;
  font-size: 14px;
}
</style>
